<template>
    <div>
        <div>
            <el-button type="success" @click="handleExport">导出</el-button>
            <el-button type="primary" @click="dialogImportVisible = true">
                导入
            </el-button>
        </div>
        <el-table
                  :data="categories"
                  style="width: 100%"
                  row-key="id"
                  border
                  lazy
                  :load="load"
                  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                  >
            <el-table-column prop="name" label="分类名称" />
            <el-table-column prop="imageUrl" label="图标">
                <template #default="scope">
                    <img
                         v-if="scope.row.imageUrl"
                         :src="scope.row.imageUrl"
                         style="width:50px;height:50px"
                         />
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="排序" />
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    {{ scope.row.status === 1 ? '正常' : '禁用' }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />
        </el-table>
        <div>
            <el-dialog v-model="dialogImportVisible" title="导入分类">
                <el-upload
                           class="upload-demo"
                           :action="uploadUrl"
                           :on-success="handleUploadSuccess"
                           :on-error="handleUploadError"
                           :headers="headers"
                           name="excel"
                           >
                    <el-button type="primary">上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传excel文件,不能超过1MB
                        </div>
                    </template>
                </el-upload>
            </el-dialog>
        </div>

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getCategoriesByPid,exportCates } from '@/api/category'
import { useApp } from '@/pinia/modules/app'
const categories=ref([])
onMounted(()=>{
    initData(0)
})
const initData=async(pid)=>{
        const{data}=await getCategoriesByPid(pid)
        categories.value=data
}
const load =async(row, treeNode, resolve)=>{
       const{data} =await getCategoriesByPid(row.id)
       resolve(data)
}

const dialogImportVisible = ref(false)
const uploadUrl=ref('http://localhost:8081/admin/product/category/import')
const headers=ref({token:useApp().authorization.token})
const handleUploadSuccess=response=>{
    if(+response.code===200){
        ElMessage.success('导入分类成功')
        initData(0)
    }else{
        ElMessage.error(response.message)
    }
    dialogImportVisible.value = false
}
const handleUploadError=error=>{
    ElMessage.error('网络错误')
    dialogImportVisible.value = false
}


const handleExport=()=>{
    exportCates().then(res=>{
        const blob =new Blob([res])
        const link=document.createElement('a')
        link.href=window.URL.createObjectURL(blob)
        link.download='商品分类数据.xlsx'
        link.click()
    })
}
</script>